import React, { Component } from 'react';
import { connect } from 'react-redux';
import { logIn } from '../Redux/Actions/authAction';
import {LoginUrl} from './common/url';
import {browserHistory, hashHistory,Link} from 'react-router';
import Slider from 'react-slick';
import loginimg from '../Images/login1.jpg';
import logo from '../Images/logo.png';

const history = process.env.NODE_ENV !== 'production' ? browserHistory : hashHistory;

class Login extends Component {
  constructor(props){
        super(props);
        this.state = {
          index: 0,
          direction: null,
          rememberUP:false,
          username:localStorage.username?localStorage.username:'',
          password:localStorage.password?localStorage.password:''
        };
        this.remember = this.remember.bind(this);
        this.textInput = (event)=>{
            const name = event.target.name
            this.setState({
                [name]:event.target.value
            })
        }
  }

  componentWillUpdate(nextProps, nextState) {
      const {authReducer} = nextProps;
      if(authReducer.isLoggedIn == false){
          return false;
      }else{
          //this.refs.errmsg.innerHTML = '手机号或密码错误！';
          // sessionStorage.setItem("username", this.state.username);
          // sessionStorage.setItem("password", this.state.password);
          history.push("/main/orderall");
      }
  }
  //图片轮播
  handleSelect(selectedIndex, e) {
    this.setState({
      index: selectedIndex,
      direction: e.direction
    });
  }

  remember(){
    if(this.state.rememberUP){
      this.setState({
        rememberUP:false
      })
      localStorage.removeItem("rememberUP");
    }else{
      this.setState({
        rememberUP:true
      })
      localStorage.rememberUP = true;
    }
  }

  login(){
    if(this.state.username == ''){
      this.refs.errmsg.innerHTML = '请输入用户名';
      return false;
    }
    if(this.state.password == ''){
      this.refs.errmsg.innerHTML = '请输入密码';
      return false;
    }
    const reg = /^1[3|4|5|7|8][0-9]{9}$/;
    if(!reg.test(this.state.username)){
      this.refs.errmsg.innerHTML = '请输入正确的手机号';
      return false;
    }
    this.refs.errmsg.innerHTML = '';
    this.refs.loginBtn.innerHTML = '登录中...';
    let opt = {
        'username': this.state.username,
        'password': this.state.password
    };
    if(localStorage.rememberUP){
      localStorage.username = this.state.username;
      localStorage.password = this.state.password;
    }
    this.props.dispatch(logIn(opt));
  }

  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false
    };
    return (
      <div>
        <Slider {...settings}> 
          <div><img src={loginimg} alt="loginbg" /></div>
          <div><img src={loginimg} alt="template" /></div>
        </Slider>
        <div className="loginbox">
						<fieldset>
              <div>
                <img className="boximg" alt="280*70" src={logo} />
              </div>
							<div className="form-group">
								<input className="form-control" value={this.state.username} placeholder="请输入您的手机号" onChange={this.textInput} name="username" type="text" />
							</div>
							<div className="form-group">
								<input className="form-control" value={this.state.password} placeholder="请输入您的密码" onChange={this.textInput} name="password" type="password" />
							</div>
              <div ref="errmsg" className="errmsg"></div>	
              <div className="box-btn">
							  <button className="btn btn-primary" ref="loginBtn" onClick={this.login.bind(this)}>登录</button>
              </div>
              <div className="checkbox">
								<label>
									<input name="remember" type="checkbox" className="login-checkbox" value={this.state.rememberUP} onClick={this.remember}/>
                  记住密码
								</label>
                <label className="pull-right boxa">
                  <Link to="/signup" className="boxa">点我注册 </Link>
                  | 
                  <Link to="/lost" className="boxa"> 忘记密码</Link>
                </label>
							</div>
						</fieldset>
        </div>
        <footer className="loginfooter">
          © 2017 JieBaoYun, Inc. 
        </footer>
      </div>
    );
  }
}

export default connect((state) => {
    const { authReducer } = state;
    return {
        authReducer
    }
})(Login);